<template>
  <div class="name">
    <div class="name-title">父组件不变的部分</div>

    <div class="name-link">
      <RouterLink :to="{name:'NameChildrenA'}">NameChildrenA</RouterLink>
      <button @click="$router.push({name:'NameChildrenB'})">NameChildrenB</button>
    </div>

    <div class="name-view">
      <RouterView/>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'Name'
});
</script>

<style scoped>
.name {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.name-title {
  font-size: 18px;
}

.name-link {
  display: flex;
  column-gap: 20px;
}

.name-view {
  font-size: 13px;
  font-weight: bold;
  color: skyblue;
  margin-top: 10px;
}
</style>